<template>
	<view class="login-type">
		<view class="login-type-back">
			<uni-transition :duration="500" :mode-class="'slide-top'" :styles="transfromClass" :show="imgShow" class="login-type-header">
				<view class="" style="margin-top: 100rpx;">
					<img style="width:35%;height:260rpx;" src="../../../static/heade-login-min.png" alt="">
					<view style="font-weight: bold;font-size: 35rpx;">旅游记账与调研</view>
				</view>
			</uni-transition>
			<view class="login-type-button" >
				<uni-transition :duration="500" :mode-class="modeClass" :styles="transfromClass" :show="transShow" >
						<button  open-type="getPhoneNumber"
									@getphonenumber="getPhoneNumber"  class="text30 button" style="color:#ffffff;font-weight: bold;margin-top: 20rpx;position: relative;background-color:#09BA08;border-radius: 60rpx;"><text style="padding-left:55rpx;display: inline-block;">微信账号快捷登陆</text> </button>
				</uni-transition>
				<uni-transition :duration="500" :mode-class="'slide-right'" :styles="transfromClass" :show="passShow" >
					<text  class="text28"  style="color:#556798;font-weight: bold;"  @click="urlLogin">输入账号密码登录</text>
				</uni-transition>
			</view>
		</view>
	</view>
</template>  

<script>
	const app=getApp()//获取公共参数
	export default {
		data() {
			return {
				imgShow:false,
				passShow:false,
				transShow: false,
				modeClass: ['slide-left'],
				transfromClass: {
					// position: 'fixed',
					// bottom: 0,
					// top: 0,
					// left: 0,
					// right: 0,
					// display: 'flex',
					// 'justify-content':'center',
					// 'align-items': 'center'
				},
				// 最新的code  授权需要的相关参数
				code: '',
				iv: '',
				encryptedData: '',
				rawData:''
			}
		},
		onShow() {
			// 提前调用wxlogin获取最新code
			this.wxlogin()
			this.rawData=this.$store.state.vuex_rawData
			console.log('this.rawDatathis.rawDatathis.rawDatathis.rawDatathis.rawDatathis.rawData',this.rawData)
		},
		onLoad() {
			this.transShow=true
			this.imgShow=true
			this.passShow=true
			// this.transfromClass.position='fixed'
			// this.transfromClass.bottom=0
			// this.transfromClass.top=0
			// this.transfromClass.left=0
			// this.transfromClass.right=0
			// this.transfromClass.display=flex
			// this.transfromClass.position='fixed'
		},
		methods:{
			open(mode) {
				console.log('发放',mode)
				this.modeClass = mode;
				this.transShow = !this.transShow;
			},
			onTap() {
				this.transShow =  false;
			},
			
			
			
			
			// 点击账号密码登录跳转账号密码登录页面
			urlLogin:function(){
				uni.navigateTo({
					url:'/pages/componentsC/login/index'
				})
			},
			// 提前调用login获取登录code
			wxlogin:function() {
			    var _self = this;
			    uni.login({
			        success: (res) => {
			            if (res.code) {
			                // 只有授权成功后才可以调用
			                var code = res.code;
			                _self.code=code
							console.log('logintype页面中的code',_self.code)
			            }
			        }
			    });
			},
			// 点击手机授权登录按钮
			getPhoneNumber(e) {
				console.log('获取手机号',e)
			    var _self = this;
			    if (e.detail.errMsg=="getPhoneNumber:fail user deny") {
			       _self.getUserProfile()
			    } else {
			        var _self = this;
					// this.$store.commit('VUEX_ENCRYPTEDDATA',e.detail.iv)
					this.iv=e.detail.iv,
					this.encryptedData=e.detail.encryptedData // 调用login登录接口
					// this.$store.commit('VUEX_IV',e.detail.encryptedData)
					uni.setStorageSync('userInfoAvatarimage', this.rawData.avatarUrl); // 存储头像
			        //  // 登录
			        this.userLogin();
			    }
			},
			// 进行授权登录
			userLogin: function () {
				var params= {
				        code: this.code,
				        rawData: this.rawData,
				        iv: this.iv,
				        encryptedData: this.encryptedData
				    }
					console.log('最终登录需要传递的参数',params)
			    var that = this;
				uni.request({
				    method: 'GET',
				    url: 'https://jizhang.xqyu.cn/index.php/addons/ykquest/user_api/userlogin', 
				    dataType: 'json',
				    header: {
				        'content-type': 'application/x-www-form-urlencoded'
				    },
				    data:params,
				    success: function (result) {
				        if (result.data.code == 1) { 
							console.log('得到的userLogin信息userLogin信息userLogin信息userLogin信息',result.data.data)
							uni.setStorageSync('phone', result.data.data.phone); // 存储电话
							uni.setStorageSync('openid', result.data.data.openid);// 存储openid
							// 调用后台登录接口
							// 关闭协议弹窗
							that.showProduct=false
							 // 调用登录
							if (result.data.data.phone) {
								that.login(result.data.data.phone);
							}
				        } else {
				            uni.showToast({
				                title: '授权登录失败',
				                icon: 'none',
				                duration: 2000
				            });
				        }
				    },
				    fail: function (err) {
				        uni.showToast({
				            title: '授权失败' + err.errMsg,
				            icon: 'none',
				            duration: 2000
				        });
				    }
				});
			},
			// 开始登录
			login: function (phone) {
				var _self=this
				this.$.tipLoading('授权中')
				this.transShow=false
				this.passShow=false
				this.imgShow=false
			    uni.request({
			        method: 'POST',
			        url: 'https://jizhang.xqyu.cn/index.php/api/index/login',
			        dataType: 'json',
			        header: {
			            'content-type': 'application/x-www-form-urlencoded'
			        },
			        data: {
			            phone: phone
			        },
			        success: function (res) {
			            if (res.data.code == 1) {
							_self.$.hideLoading()
							console.log('是否登录授权成功',res)
							let userType=res.data.data.user_type
							if(userType==="自然人"){
								app.globalData.type=1//自然人
								_self.$store.commit('VUEX_USERTYPE',1)
							}else {
								app.globalData.type=2//法人
								_self.$store.commit('VUEX_USERTYPE',2)
							}
							_self.$store.commit('VUEX_ID',res.data.data[0].id)
							app.globalData.id=res.data.data[0].id
							console.log('获取到登录后赋值给app文件里的变量值获取到登录后赋值给app文件里的变量值获取到登录后赋值给app文件里的变量值获取到登录后赋值给app文件里的变量值',app.globalData)
							//此处可能需要后续根据后台返回数据格式修改
							var arr = []
							for (var i in res.data.data) {
							    arr.push(res.data.data[i]); //属性
							    //arr.push(object[i]); //值
							}
							
							let id=arr[0].id
							console.log('shuz',userType,id)
							// _self.loginScore(userType,id)//调用登录累计积分
			                //    存储用户信息
			                uni.setStorageSync('userInfo', res.data.data);
			                uni.showToast({
			                    title: '授权成功',
			                    duration: 2000
			                }); 
							setTimeout(function(){
								//  跳转首页
								uni.switchTab({
								    url: '../../example/components'
								});
							},2000)
			            } else {
							_self.transShow=true
							_self.passShow=true
							_self.imgShow=true
			                uni.showToast({
			                    title: '登录绑定的手机号与给联络人的手机号不一致，请联系管理员/联络人',
			                    icon: 'none',
			                    duration: 2000
			                }); 
							// 重新授权延迟跳转首页
			                setTimeout(function () {
								_self.wxGetUserInfo()//重新弹窗授权
			                }, 2000);
			            }
			        },
			        fail: function (err) {
			            uni.showToast({
			                title: '登录绑定的手机号与给联络人的手机号不一致，请联系管理员/联络人' ,
			                icon: 'none',
			                duration: 2000
			            });
			        }
			    });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login-type{
		height: 100%;
		.login-type-back{
			padding-top: 100rpx;
			.login-type-header{
				text-align: center;
				margin-bottom: 100rpx;
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				// margin-top: 50rpx;
				// margin-top: 248rpx;
			}
			
			.login-type-button{
				margin-top: 100rpx;
				z-index: 99;
				text-align: center;
				// margin-top: -200rpx;
				padding: 30rpx;
			    .button{
					background: url(../static/wexin.png) no-repeat 150rpx 6rpx ;
					display: flex;
					justify-content: center;
					margin-bottom: 30rpx;
					width: 90%;
				}
				.u-line{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 30rpx 30rpx;
				}
			}
		}
	}
</style>